<script setup lang="ts">
import { ref, computed, toRefs, onMounted, onUnmounted } from 'vue'
import type User from '@/types/user' // 确保导入正确的类型

const user = ref<User>()

// 定义计算属性，并使用非空断言
const canCreateTask = computed(() => {
  return user.value?.position !== undefined && user.value!.position >= 3
})

onMounted(() => {
  try {
    const userString = uni.getStorageSync('userInfo')

    if (userString) {
      user.value = JSON.parse(userString)
      // console.log('Yonghu:', user.value);

      // 可选：在这里执行需要用户信息的操作
    } else {
      console.log('Yonghu: 用户信息不存在')
      // 提示用户登录或跳转到登录页
      uni.showToast({ title: '请先登录', icon: 'none' })
    }
  } catch (error) {
    console.error('读取用户信息时出错:', error)
    uni.showToast({ title: '加载用户信息失败，请稍后再试', icon: 'none' })
    // 你可以选择重定向到登录页面或其他适当的操作
  }
})
</script>
<template>
  <view class="able">
    <!-- 阀门任务创建 -->
    <navigator v-if="canCreateTask" class="category-item" url="/pages/valve/index">
      <image class="icon" src="../../../static/index/taskCreate.png" mode="aspectFit"></image>
      <text class="text">任务创建</text>
    </navigator>

    <!-- 任务查询 -->
    <navigator class="category-item" url="/pages/taskQuery/index">
      <image class="icon" src="../../../static/index/taskQuery.png" mode="aspectFit"></image>
      <text class="text">任务查询</text>
    </navigator>

    <!-- 任务收藏 -->
    <navigator class="category-item" url="/pages/taskFavor/index">
      <image class="icon" src="../../../static/index/favorTask.png" mode="aspectFit"></image>
      <text class="text">任务收藏</text>
    </navigator>

    <!-- 阀门操作 -->
    <navigator class="category-item" url="/pages/scanQR/index">
      <image class="icon" src="../../../static/index/valveOperation1.png" mode="aspectFit"></image>
      <text class="text">阀门操作</text>
    </navigator>

    <!-- 阀门查询,根据日期 -->
    <navigator class="category-item" url="/pages/valveQuery/index">
      <image class="icon" src="../../../static/index/valveDate1.png" mode="aspectFit"></image>
      <text class="text">时间查询</text>
    </navigator>

    <!-- 阀门查询，根据阀门位置编号 -->
    <navigator class="category-item" url="/pages/valveQueryByPositionNumber/QueryByValvePositionNumber">
      <image class="icon" src="../../../static/index/valvePositionNumber1.png" mode="aspectFit"></image>
      <text class="text">位号查询</text>
    </navigator>

    <!-- 活动阀门查询（开启状态的阀门查询） -->
    <navigator class="category-item" url="/pages/queryActiveValve/index">
      <image class="icon" src="../../../static/index/openValveStatues.png" mode="aspectFit"></image>
      <text class="text">所有开阀</text>
    </navigator>
  </view>
</template>
<style lang="scss" scoped>
.able {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  /* 从左侧开始排列 */
  align-items: center;
  /* 垂直居中对齐 */
  padding: 20rpx;
  /* 可选：增加内边距 */
  margin-top: 25rpx;
  // 允许子元素换行
  flex-wrap: wrap;
}

.category {
  margin: 20rpx 0 0;
  padding: 10rpx 0;
  display: flex;
  flex-wrap: wrap;
  min-height: 328rpx;
}

.category-item {
  width: 20%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  margin-bottom: 15px;
}

.icon {
  width: 100rpx;
  height: 100rpx;
}

.text {
  font-size: 26rpx;
  color: #666;
}

.text {
  font-size: 26rpx;
  color: #666;
}
</style>
